<template>
  
    <div class="contais">
            <!-- 顶部 -->
            <van-nav-bar class="titles">
            <i slot="left" class="iconfont iconzuojiantou" @click="$router.go(-1)"></i>
            <p slot="title" class="title">礼物</p>
            <i slot="right" class="iconfont iconlianjie" @click="showShare = true"></i>
            </van-nav-bar>
            <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
            />
            <!-- 商品列表 -->
            <div class="main" @click="$router.push('/info')">        
                <!-- 顶部图片 -->
                <van-image                             
                    :src="require('@/assets/500507600_banners.png')" 
                    class="images"
                    fit="cover"                                  
                />
                <!-- 描述信息 -->                 
                <van-cell-group class="infos">
                    <van-cell>
                        <h3 slot="title" class="infos-title">世界上热门流行礼物</h3>
                        <p slot="label" class="infos-label">礼物列表</p>
                    </van-cell>
                </van-cell-group>
                <!-- 商品信息 -->
                <div class="shop">        
                        <van-card>
                            <h3 slot="title" class="shop-title">1、白色恋人</h3>
                            <div slot="desc" class="shop-desc">
                                <p>据说，原名“白恋人”的浪漫例外：“一个蛋糕厨师在冬天的时候做了一块甜美可口的饼干，有一天，
                                    蛋糕老师看到了一个对手。情侣们一起穿越原始的雪地，甜蜜的景色感动了蛋糕老师，从此，这种
                                    美味的饼干有了一个美丽的名字——白恋人。人们可以在白色恋人产品的包装上免费印上自己喜欢的
                                    图案，做成私人专属的定制款。另外，1997年（平成9年），作为白色恋人的姐妹产品，“白色巧克
                                    力饮料”也开始贩卖。
                                </p>
                                <div class="image">
                                        <van-image                                     
                                        :src="require('@/assets/白色恋人s.png')"
                                        />
                                </div>
                                <p>
                                    在札幌市西区，石屋制果设有一处由厂房改装建成的旅游景点，内有公园、博物馆及工厂，介绍
                                    “白之恋人”的历史及制造方法，亦珍藏了各国的历史茶具及关于巧克力的海报。
                                </p>
                            </div>
                            <!-- 商品价格 -->
                            <p slot="price" class="shop-price">￥62.0</p>
                            <p slot="origin-price" class="shop-origin-price">￥88.0</p>
                            <van-button type="primary" slot="num" class="shop-footer">更多</van-button>
                        </van-card>
                </div>
              </div>  
    </div>
</template>
<script>
export default {
    data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ]
    }
  },
  methods: {
    onSelect(option) {
      this.$toast(option.name)
      this.showShare = false
    }
  }
}
</script>
<style lang="less">
.contais{
    // 去描述边框
    .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{
            border: none;
        }  
    .van-hairline--bottom::after{
        border: none;
    }
    .titles{
        .iconzuojiantou{
            font-size: 36px;
            color: #535353;
            padding-left: 20px;
        }
        .title{
            font-size: 32px;        
            color: #484747;
        }
        .iconlianjie{
            font-size: 40px;
            color: #535353;
             padding-right: 20px;
        }
    }
    .main{
        padding: 0px 59px;
        // 图片
        .images{
        width: 100%;
        height: 296px;
        display: block;
        img{
            border-radius: 10px;
            display: block;
        }
        }
        // 描述信息
        .infos{
            text-align: left;
            .van-cell{
                padding: 25px 0px 30px;
            }
            .infos-title{
                font-size: 36px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #484747;
            }
            .infos-label{
                font-size: 22px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #b4b4b4;
            }
        }
        // 商品列表
        .shop{
            .van-card{
                background: #ffffff; 
                padding: 0px;             
            }
            text-align: left;
            .shop-title{
                font-size: 28px;
                font-weight: 500;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #484747;
                margin-bottom: 8px;
            }
            .shop-desc{
            p:nth-of-type(1){
                font-size: 22px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #737373;
            }
            p:nth-of-type(2){
                font-size: 22px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #737373;
                    margin-bottom: 15px;
            }
            }
            // 图片部分
            .image{
                margin: 30px 0px;  
                width: 100%;
                height: 212px;
                background: #f5f8fd;  
                .van-image{
                    width: 233px;
                    height: 233px;
                    display: block;
                    margin: 0 auto;
                }         
            }
            // 商品价格
            .shop-price{
                font-size: 22px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #4da1dd;
            }
            // 删除价格
            .shop-origin-price{
                font-size: 22px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #c2c4c5;;
            }
            // 更多
            .van-card__num{
                        margin-top: -8px;
            }
            .shop-footer{
                width: 92px;
                height: 32px;
                background-color: #4a90e2;
                font-size: 18px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #fefefe;
                padding: 0px;
                border: none;
                .van-button__text{
                    padding-top: 3px;
                }
            }
         }
    }
}
</style>
